<template lang='html'>
  <div class="home">
          <div class="b_">
              <div class="h-center">
                  <avue-data-display :option="option" class="option"></avue-data-display>
              </div>
              <div class="h-bottom">
                <div class="h-hot">
                    <div class="center-left">
                        <p>快捷入口</p>
                        <div class="c-list"> 
                            <div v-for="(item,index) in entrance.fun" :key="index" class="dian" @click="go(item)">
                              <div class="icon">
                                  <img :src="item.imgae" alt="">
                              </div>
                               <p >{{item.name}}</p>
                             </div>
                        </div>
                        
                    </div>
                    <div class="center-right">
                      <p>待办事项</p>
                      <div class="r_list">
                          <div v-for="(item,index) in data" :key="index" class="r_list_a">
                              <div class = "r_list_b">
                                  <div class="img">
                                      <img src="https://img2.baidu.com/it/u=1077360284,2857506492&fm=26&fmt=auto&gp=0.jpg"></img>
                                  </div>
                                  <div class = "r_list_c">
                                      <p>{{item.name}}</p>
                                      <span>{{item.type}} {{item.author}}</span>
                                      <p>{{item.publisher}}</p>
                                       
                                  </div>
                              </div>
                              <div class = "r_list_d"> 
                                  <p>{{item.releasetime}}</p>
                                  <p class="r_list_d_a">{{item.relstatus}}</p>
                              </div>
                          </div>
                      </div>
                     
                    </div>
                </div>
                 
                  <div class="h-footer">
                      新用户指南
                  </div>
            </div>
           
          </div>   
      </div>
</template>


<script>
import axios from "axios";
export default {
  name: "home",
  data() {
    return {
      option: {
        span: 6,
        data: [
          {
            // click: function (item) {
            //   alert(JSON.stringify(item));
            // },
            count: 100,
            decimals: 2,
            title: "日活跃数",
            href: "https://avuejs.com",
            target: "_blank",
          },
          {
            // click: function (item) {
            //   alert(JSON.stringify(item));
            // },
            count: "3,000",
            title: "月活跃数",
            href: "https://avuejs.com",
            target: "_blank",
          },
          {
            // click: function (item) {
            //   alert(JSON.stringify(item));
            // },
            count: "20,000",
            title: "年活跃数",
            href: "https://avuejs.com",
            target: "_blank",
          },
          {
            // click: function (item) {
            //   alert(JSON.stringify(item));
            // },
            count: "40,000",
            title: "周活跃数",
            href: "https://avuejs.com",
            target: "_blank",
          },
        ],
      },
      entrance: {
        fun: [
          {
            imgae: require("../../../../static/student-img/1.png"),
            name: "用户管理",
            url: "/user",
          },
          {
            imgae: require("../../../../static/student-img/2.png"),
            name: "图书管理",
            url: "/books",
          },
          {
            imgae: require("../../../../static/student-img/3.png"),
            name: "权限分配",
            url: "/permis",
          },
          {
            imgae: require("../../../../static/student-img/4.png"),
            name: "日志查看",
            url: "/daylog",
          },
        ],
      },
      crr: [],
    };
  },

  components: {},

  computed: {
    data() {
      this.$store.state.data.forEach((item) => {
        item.releasetime =this.timeago(this.rTime(item.releasetime));
        if(item.relstatus === 0 || item.relstatus === null ){
            item.relstatus = "未审核"
            
          }else if(item.relstatus === 1){
            item.relstatus = "通过"

          }else {
            item.relstatus = '未通过'
          }
      });
      return this.$store.state.data;
    },
  },

  created() {
    this.$store.dispatch("getdata");
  },

  methods: {
    go(item) {
      this.$router.push(item.url);
    },

    // 转后台的时间
    rTime(date) {
      var json_date = new Date(date).toJSON();
      let r = new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
      return new Date(r).getTime()
    },
    timeago(datetime) {
      console.log(datetime, typeof datetime);
      var dateTimeStamp = new Date(datetime).getTime() - 8 * 60 * 60 * 1000; //这里要减去中国的时区8小时
      console.log(dateTimeStamp);
      var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示
      var hour = minute * 60;
      var day = hour * 24;
      var week = day * 7;
      var halfamonth = day * 15;
      var month = day * 30;
      var now = new Date().getTime(); //获取当前时间毫秒
      var diffValue = now - dateTimeStamp; //时间差

      if (diffValue < 0) {
        console.log("diffValue<0", datetime, dateTimeStamp, now, diffValue);
        return "刚刚";
      }
      var minC = diffValue / minute; //计算时间差的分，时，天，周，月
      var hourC = diffValue / hour;
      var dayC = diffValue / day;
      var weekC = diffValue / week;
      var monthC = diffValue / month;
      var result = "2";
      if (monthC >= 1 && monthC <= 3) {
        result = " " + parseInt(monthC) + "月前";
      } else if (weekC >= 1 && weekC <= 3) {
        result = " " + parseInt(weekC) + "周前";
      } else if (dayC >= 1 && dayC <= 6) {
        result = " " + parseInt(dayC) + "天前";
      } else if (hourC >= 1 && hourC <= 23) {
        result = " " + parseInt(hourC) + "小时前";
      } else if (minC >= 1 && minC <= 59) {
        result = " " + parseInt(minC) + "分钟前";
      } else if (diffValue >= 0 && diffValue <= minute) {
        result = "刚刚";
      } else {
        var datetime = new Date();
        datetime.setTime(dateTimeStamp);
        console.log(datetime);
        var Nyear = datetime.getFullYear();
        {
        }
        var Nmonth =
          datetime.getMonth() + 1 < 10
            ? "0" + (datetime.getMonth() + 1)
            : datetime.getMonth() + 1;
        var Ndate =
          datetime.getDate() < 10
            ? "0" + datetime.getDate()
            : datetime.getDate();
        var Nhour =
          datetime.getHours() < 10
            ? "0" + datetime.getHours()
            : datetime.getHours();
        var Nminute =
          datetime.getMinutes() < 10
            ? "0" + datetime.getMinutes()
            : datetime.getMinutes();
        var Nsecond =
          datetime.getSeconds() < 10
            ? "0" + datetime.getSeconds()
            : datetime.getSeconds();
        console.log(Nyear, Nmonth, Ndate, Nhour, Nminute, Nsecond);
        result = Nyear + "-" + Nmonth + "-" + Ndate;
      }
      console.log(result);
      return result;
    },
  },
};
</script>
<style lang='css' scoped>
.b_ {
  width: 88%;
  height: 100%;
  overflow: auto;
}
.h-top {
  width: 100%;
  height: 80px;
  background: #fff;
}
.h-center {
  margin-top: 20px;
  margin-left: 20px;
}
.h-bottom {
  width: 100%;
  height: 600px;
  margin-top: 30px;
  margin-left: 20px;
  border-radius: 6px;
}
.h-hot {
  display: flex;
}
.center-left {
  width: 50%;
  margin-right: 10px;
  height: 300px;
  background: #fff;
  border-radius: 6px;
  padding: 20px;
}
.center-left p {
  font-size: 20px;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 600;
}
.center-right {
  margin-left: 10px;
  width: 50%;
  height: 300px;
  background: #fff;
  padding: 20px;
  border-radius: 6px;
  overflow: hidden;
}
.center-right p {
  font-size: 20px;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 600;
}
.option {
  background: #fff;
  border-radius: 6px;
}
.h-footer {
  margin-top: 20px;
  width: 100%;
  height: 240px;
  background: #fff;
  border-radius: 6px;
  padding: 20px;
}
.router-link-active {
  background: rgba(21, 160, 255, 0.3);
  text-align: center;
  font-size: 20px;
}
.router-link-active p {
  width: 100%;
  height: 50px;
}
.dian {
  margin-top: 20px;
  text-align: center;
}
.c-list {
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: space-around;
}
.icon img {
  width: 50px;
  height: 60px;
}
.r_list{
  width: 100%;
  height: 100%;
  overflow: auto;
  /* background: chartreuse; */
  padding: 10px;
}
.b_::-webkit-scrollbar { width: 0 !important }
.r_list::-webkit-scrollbar { width: 0 !important }

.r_list_a{
  width: 90%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  border-bottom:1px solid rgba(0, 0, 0, 0.1);
  padding:8px 0;

}
.r_list_a div:first-of-type{
  display: flex;
 
}
.r_list_a div:first-of-type img{
  width: 50px;
  height: 50px;
  margin: 10px 20px 10px 10px;
  border-radius: 50%;
  
}
.r_list_b p{
  font-weight: 500;
} 
.r_list_b p:first-child{
  font-size: 16px;
  color:rgba(21, 160, 255)
}
.r_list_b span{
  font-size: 12px;
  padding-bottom: 20px;
  color: rgba(0, 0, 0, 0.3);
}
.r_list_b p:last-of-type{
  font-size: 14px;
  margin-top: 10px;
}
.r_list_d {

   font-weight: 500;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
  
}
.r_list_d P{
  font-size: 14px !important;
  font-weight: 500;
}

</style>